<!DOCTYPE html>
<html>
<head>
<title>giscloud代码生成器</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="shortcut icon" href="/static/images/favicon.ico"/>
<link rel="bookmark" href="/static/images/favicon.ico"/>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="/static/plugins/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/css/main.css">

</head>
<body>
<div id="rrapp">
	<div class="grid-btn">
		<div class="form-group col-sm-2">
			<input type="text" class="form-control" v-model="q.name" @keyup.enter="query" placeholder="数据库名称">
		</div>
		<a class="btn btn-primary" @click="query"><i class="fa fa-search-plus">查询</i></a>
		<a class="btn btn-primary" @click="add"><i class="fa fa-plug"></i>&nbsp;新增</a>
		<a class="btn btn-primary" @click="update"><i class="fa fa-edit"></i>&nbsp;修改</a>
		<a class="btn btn-primary" @click="del"><i class="fa fa-remove"></i>&nbsp;删除</a>
	</div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
<div class="modal fade" id="databaseEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">数据库信息</h4>
			</div>
			<div class="modal-body">
				<form id="databaseEditForm" class="form-horizontal">
					<input type="hidden" id="operateMode"/>
					<input type="text" class="form-control" id="id" name="id" style="display:none;" placeholder="隐藏域：ID">
					<div class="form-group">
						<label class="col-sm-2 control-label">数据库名称</label>
						<div class="col-sm-10">
							<input type="text" id="name" name="name" class="form-control" placeholder="数据库名称">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">数据库连接</label>
						<div class="col-sm-10">
							<input type="text" id="url" name="url" class="form-control" placeholder="数据库连接">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">主机地址</label>
						<div class="col-sm-10">
							<input type="text" id="hostName" name="hostName" class="form-control" placeholder="主机地址">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">主机端口</label>
						<div class="col-sm-10">
							<input type="text" id="port" name="port" class="form-control" placeholder="主机端口">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-10">
							<input type="text" id="userName" name="userName" class="form-control" placeholder="用户名">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10">
							<input type="text" id="password" name="password" class="form-control" placeholder="密码">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">数据源名</label>
						<div class="col-sm-10">
							<input type="text" id="dbName" name="dbName" class="form-control" placeholder="SCHEMA">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">SCHEMA</label>
						<div class="col-sm-10">
							<input type="text" id="dbSchema" name="dbSchema" class="form-control" placeholder="SCHEMA">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">数据库类型</label>
						<div class="col-sm-10">
							<select name="dbType" id="dbType" class="selectpicker">
								<option value="MySQL">MySQL</option>
								<option value="PostgreSQL">PostgreSQL</option>
								<option value="Oracle">Oracle</option>
								<option value="SQLServer">SQLServer</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">驱动程序</label>
						<select name="driver" id="driver" class="selectpicker">
							<option value="com.mysql.jdbc.Driver">com.mysql.cj.jdbc.Driver</option>
							<option value="org.postgresql.Driver">org.postgresql.Driver</option>
							<option value="oracle.jdbc.OracleDriver">oracle.jdbc.OracleDriver</option>
							<option value="com.microsoft.sqlserver.jdbc.SQLServerDriver">com.microsoft.sqlserver.jdbc.SQLServerDriver</option>
						</select>
					</div>
				</form>
			</div>
			<div class="modal-footer" id="submitDatabase">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" id="submitBtn" class="btn btn-primary" data-loading-text="提交中...">提交</button>
			</div>
		</div>
	</div>
</div>

<script src="/static/libs/jquery.min.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script src="/static/libs/bootstrap.min.js"></script>
<script src="/static/libs/vue.min.js"></script>
<script src="/static/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="/static/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="/static/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/database.js"></script>
</body>
</html>